<template>
    <div class="goodPlace">
        <!-- <div v-if="isGoodPlace">
        <div v-for="(item,index) in townList2020" :key="index">
            <div
                :id="'yuanzhu'+ index"
                style="position: absolute; left: 0px; top: 0px;z-index:3;"
            >
                <div style="text-align:center">{{item.name}}</div>
                <div style="text-align:center">{{item.value}}</div>
                <div class="yuanzhu"></div>
            </div>
        </div>
        </div>-->
        <div class="evaluate-wrap">
            <div class="evaluate-title">
                <span>总体评价</span>
                <img src="/images/GoodPlace/title-line.png" />
                <div class="title-num">{{overAll}}</div>
            </div>
            <div class="evaluate-choice">
                <div class="choice-conditions">
                    <div class="choice-row">
                        <span>评价年:</span>
                        <el-select
                            @change="assessYear"
                            v-model="yearValue1"
                            slot="prepend"
                            placeholder="请选择"
                        >
                            <el-option label="2020" value="2020"></el-option>
                            <el-option label="2019" value="2019"></el-option>
                            <el-option label="2018" value="2018"></el-option>
                        </el-select>
                    </div>
                    <div class="choice-row">
                        <span>基准年:</span>
                        <el-select v-model="yearValue2" slot="prepend" placeholder="请选择">
                            <el-option label="2020" value="2020"></el-option>
                            <el-option label="2019" value="2019"></el-option>
                            <el-option label="2018" value="2018"></el-option>
                        </el-select>
                    </div>
                    <div class="choice-btn-wrap">
                        <button class="choice-btn">总体评价</button>
                        <button class="btn-pad" @click="contrast">对比评价</button>
                    </div>
                </div>
                <div class="choice-charts">
                    <div class="charts-wrap" v-for="(item,index) of charsData2020" :key="index">
                        <div :id="item.id" class="charts-data"></div>
                        <span @click="changeScore(item.label)">{{item.label}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="score-wrap">
            <div>
                <img src="/images/GoodPlace/title-top.png" />
                <span>{{scoreTitle}}</span>
            </div>
            <div id="lineCharts" class="line-charts-data"></div>
        </div>
        <div class="list-wrap">
            <div>
                <img src="/images/GoodPlace/title-top.png" />
                <span class="title">基准年相较红黑榜</span>
            </div>
            <div class="list-content">
                <div>
                    <ul>
                        <li v-for="(item,index) of contrastList" :key="index" v-if="index <= 5">
                            <span class="index down-show">{{index+1}}</span>
                            <span class="up-show list-name">{{item.name}}</span>
                            <span class="up-show">{{item.value}}</span>
                            <span class="up-show">
                                {{item.rank}}
                                <img src="/images/GoodPlace/up.png" />
                            </span>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li v-for="(item,index) of reverseArr" :key="index" v-if="index <= 5">
                            <span class="index down-show">{{index+1}}</span>
                            <span class="down-show list-name">{{item.name}}</span>
                            <span class="down-show">{{item.value}}</span>
                            <span class="down-show">
                                {{item.rank}}
                                <img src="/images/GoodPlace/down.png" />
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <Routerbtn />
    </div>
</template>

<script>
import axios from "axios";
import Routerbtn from "../thirty/Routerbtn";
export default {
    components: {
        Routerbtn,
    },
    computed: {
        reverseArr() {
            return [...this.contrastList].reverse();
        },
    },
    data() {
        return {
            scoreTitle: "综合得分榜",
            isGoodPlace: false,
            yearValue1: "2020",
            yearValue2: "2019",
            contrastList: [],
            barList: [],
            townList2020: [
                {
                    name: "华埠镇",
                    value: "91.85",
                    rank: "4",
                    lonLat: [118.349767, 29.016215],
                },
                {
                    name: "桐村镇",
                    value: "91.81",
                    rank: "3",
                    lonLat: [118.220322, 28.994596],
                },
                {
                    name: "杨林镇",
                    value: "90.03",
                    rank: "4",
                    lonLat: [118.141845, 29.058291],
                },
                {
                    name: "音坑乡",
                    value: "88.18",
                    rank: "4",
                    lonLat: [118.40048, 29.199826],
                },
                {
                    name: "芹阳办事处",
                    value: "89.92",
                    rank: "4",
                    lonLat: [118.413284, 29.12477],
                },
                {
                    name: "中村乡",
                    value: "87.14",
                    rank: "4",
                    lonLat: [118.337406, 29.218482],
                },
                {
                    name: "林山乡",
                    value: "91.52",
                    rank: "4",
                    lonLat: [118.505983, 29.144543],
                },
                {
                    name: "池淮镇",
                    value: "89.74",
                    rank: "4",
                    lonLat: [118.312342, 29.086472],
                },
                {
                    name: "苏庄镇",
                    value: "89.34",
                    rank: "4",
                    lonLat: [118.121256, 29.176933],
                },
                {
                    name: "长虹乡",
                    value: "91.27",
                    rank: "4",
                    lonLat: [118.227703, 29.237526],
                },
                {
                    name: "马金镇",
                    value: "89.01",
                    rank: "4",
                    lonLat: [118.413218, 29.302093],
                },
                {
                    name: "村头镇",
                    value: "89.91",
                    rank: "4",
                    lonLat: [118.491321, 29.280249],
                },
                {
                    name: "齐溪镇",
                    value: "86.92",
                    rank: "4",
                    lonLat: [118.317449, 29.431253],
                },
                {
                    name: "何田乡",
                    value: "88.25",
                    rank: "4",
                    lonLat: [118.315827, 29.331167],
                },
                {
                    name: "大溪边乡",
                    value: "87.96",
                    rank: "4",
                    lonLat: [118.575388, 29.290526],
                },
            ],
            townList2019: [
                {
                    name: "华埠镇",
                    value: "90.08",
                    rank: "4",
                    lonLat: [118.349767, 29.016215],
                },
                {
                    name: "桐村镇",
                    value: "90.55",
                    rank: "3",
                    lonLat: [118.220322, 28.994596],
                },
                {
                    name: "杨林镇",
                    value: "87.47",
                    rank: "4",
                    lonLat: [118.141845, 29.058291],
                },
                {
                    name: "音坑乡",
                    value: "86.7",
                    rank: "4",
                    lonLat: [118.40048, 29.199826],
                },
                {
                    name: "芹阳办事处",
                    value: "89.1",
                    rank: "4",
                    lonLat: [118.413284, 29.12477],
                },
                {
                    name: "中村乡",
                    value: "86.7",
                    rank: "4",
                    lonLat: [118.337406, 29.218482],
                },
                {
                    name: "林山乡",
                    value: "90.24",
                    rank: "4",
                    lonLat: [118.505983, 29.144543],
                },
                {
                    name: "池淮镇",
                    value: "88.75",
                    rank: "4",
                    lonLat: [118.312342, 29.086472],
                },
                {
                    name: "苏庄镇",
                    value: "88.73",
                    rank: "4",
                    lonLat: [118.121256, 29.176933],
                },
                {
                    name: "长虹乡",
                    value: "90.24",
                    rank: "4",
                    lonLat: [118.227703, 29.237526],
                },
                {
                    name: "马金镇",
                    value: "87.93",
                    rank: "4",
                    lonLat: [118.413218, 29.302093],
                },
                {
                    name: "村头镇",
                    value: "88.97",
                    rank: "4",
                    lonLat: [118.491321, 29.280249],
                },
                {
                    name: "齐溪镇",
                    value: "88.35",
                    rank: "4",
                    lonLat: [118.317449, 29.431253],
                },
                {
                    name: "何田乡",
                    value: "86.43",
                    rank: "4",
                    lonLat: [118.315827, 29.331167],
                },
                {
                    name: "大溪边乡",
                    value: "87.34",
                    rank: "4",
                    lonLat: [118.575388, 29.290526],
                },
            ],
            townList2018: [
                {
                    name: "华埠镇",
                    value: "89.42",
                    rank: "4",
                    lonLat: [118.349767, 29.016215],
                },
                {
                    name: "桐村镇",
                    value: "89.97",
                    rank: "3",
                    lonLat: [118.220322, 28.994596],
                },
                {
                    name: "杨林镇",
                    value: "89.05",
                    rank: "4",
                    lonLat: [118.141845, 29.058291],
                },
                {
                    name: "音坑乡",
                    value: "87.35",
                    rank: "4",
                    lonLat: [118.40048, 29.199826],
                },
                {
                    name: "芹阳办事处",
                    value: "88.86",
                    rank: "4",
                    lonLat: [118.413284, 29.12477],
                },
                {
                    name: "中村乡",
                    value: "86.15",
                    rank: "4",
                    lonLat: [118.337406, 29.218482],
                },
                {
                    name: "林山乡",
                    value: "89.78",
                    rank: "4",
                    lonLat: [118.505983, 29.144543],
                },
                {
                    name: "池淮镇",
                    value: "87.7",
                    rank: "4",
                    lonLat: [118.312342, 29.086472],
                },
                {
                    name: "苏庄镇",
                    value: "88.26",
                    rank: "4",
                    lonLat: [118.121256, 29.176933],
                },
                {
                    name: "长虹乡",
                    value: "89.65",
                    rank: "4",
                    lonLat: [118.227703, 29.237526],
                },
                {
                    name: "马金镇",
                    value: "87.93",
                    rank: "4",
                    lonLat: [118.413218, 29.302093],
                },
                {
                    name: "村头镇",
                    value: "88.39",
                    rank: "4",
                    lonLat: [118.491321, 29.280249],
                },
                {
                    name: "齐溪镇",
                    value: "86.18",
                    rank: "4",
                    lonLat: [118.317449, 29.431253],
                },
                {
                    name: "何田乡",
                    value: "88.25",
                    rank: "4",
                    lonLat: [118.315827, 29.331167],
                },
                {
                    name: "大溪边乡",
                    value: "87.34",
                    rank: "4",
                    lonLat: [118.575388, 29.290526],
                },
            ],
            overAll: 0,
            overAll2020: 89.09,
            overAll2019: 88.81,
            overAll2018: 88.43,
            charsData: [],
            charsData2020: [
                {
                    id: "zonghe",
                    chart: "",
                    label: "好地方综合指数",
                    pieData: [
                        { value: 100 - 90.63, name: "" },
                        { value: 90.63, name: "好地方综合指数" },
                    ],
                },
                {
                    id: "shengtai",
                    chart: "",
                    label: "好生态指数",
                    pieData: [
                        { value: 100 - 90.54, name: "" },
                        { value: 90.54, name: "好生态指数" },
                    ],
                },
                {
                    id: "jingzhi",
                    chart: "",
                    label: "好景致指数",
                    pieData: [
                        { value: 100 - 89.67, name: "" },
                        { value: 89.67, name: "好景致指数" },
                    ],
                },
                {
                    id: "chanye",
                    chart: "",
                    label: "好产业指数",
                    pieData: [
                        { value: 100 - 90.29, name: "" },
                        { value: 90.29, name: "好产业指数" },
                    ],
                },
                {
                    id: "shenghuo",
                    chart: "",
                    label: "好生活指数",
                    pieData: [
                        { value: 100 - 88.29, name: "" },
                        { value: 88.29, name: "好生活指数" },
                    ],
                },
                {
                    id: "renwen",
                    chart: "",
                    label: "好人文指数",
                    pieData: [
                        { value: 100 - 89.34, name: "" },
                        { value: 89.34, name: "好人文指数" },
                    ],
                },
                {
                    id: "xuncha",
                    chart: "",
                    label: "治理巡查指数",
                    pieData: [
                        { value: 100 - 87.83, name: "" },
                        { value: 87.83, name: "治理巡查指数" },
                    ],
                },

                {
                    id: "fugong",
                    chart: "",
                    label: "防疫－复工复产指数",
                    pieData: [
                        { value: 100 - 89.6, name: "" },
                        { value: 89.6, name: "防疫－复工复产指数" },
                    ],
                },
            ],
            charsData2019: [
                {
                    id: "zonghe",
                    chart: "",
                    label: "好地方综合指数",
                    pieData: [
                        { value: 100 - 89.98, name: "" },
                        { value: 89.98, name: "好地方综合指数" },
                    ],
                },
                {
                    id: "shengtai",
                    chart: "",
                    label: "好生态指数",
                    pieData: [
                        { value: 100 - 89.46, name: "" },
                        { value: 89.46, name: "好生态指数" },
                    ],
                },
                {
                    id: "jingzhi",
                    chart: "",
                    label: "好景致指数",
                    pieData: [
                        { value: 100 - 88.88, name: "" },
                        { value: 88.88, name: "好景致指数" },
                    ],
                },
                {
                    id: "chanye",
                    chart: "",
                    label: "好产业指数",
                    pieData: [
                        { value: 100 - 89.31, name: "" },
                        { value: 89.31, name: "好产业指数" },
                    ],
                },
                {
                    id: "shenghuo",
                    chart: "",
                    label: "好生活指数",
                    pieData: [
                        { value: 100 - 87.67, name: "" },
                        { value: 87.67, name: "好生活指数" },
                    ],
                },
                {
                    id: "renwen",
                    chart: "",
                    label: "好人文指数",
                    pieData: [
                        { value: 100 - 88.64, name: "" },
                        { value: 88.64, name: "好人文指数" },
                    ],
                },
                {
                    id: "xuncha",
                    chart: "",
                    label: "治理巡查指数",
                    pieData: [
                        { value: 100 - 87.4, name: "" },
                        { value: 87.4, name: "治理巡查指数" },
                    ],
                },

                {
                    id: "fugong",
                    chart: "",
                    label: "防疫－复工复产指数",
                    pieData: [
                        { value: 100 - 88.63, name: "" },
                        { value: 88.63, name: "防疫－复工复产指数" },
                    ],
                },
            ],
            charsData2018: [
                {
                    id: "zonghe",
                    chart: "",
                    label: "好地方综合指数",
                    pieData: [
                        { value: 100 - 89.74, name: "" },
                        { value: 89.74, name: "好地方综合指数" },
                    ],
                },
                {
                    id: "shengtai",
                    chart: "",
                    label: "好生态指数",
                    pieData: [
                        { value: 100 - 88.79, name: "" },
                        { value: 88.79, name: "好生态指数" },
                    ],
                },
                {
                    id: "jingzhi",
                    chart: "",
                    label: "好景致指数",
                    pieData: [
                        { value: 100 - 89.67, name: "" },
                        { value: 89.67, name: "好景致指数" },
                    ],
                },
                {
                    id: "chanye",
                    chart: "",
                    label: "好产业指数",
                    pieData: [
                        { value: 100 - 88.53, name: "" },
                        { value: 88.53, name: "好产业指数" },
                    ],
                },
                {
                    id: "shenghuo",
                    chart: "",
                    label: "好生活指数",
                    pieData: [
                        { value: 100 - 87.21, name: "" },
                        { value: 87.21, name: "好生活指数" },
                    ],
                },
                {
                    id: "renwen",
                    chart: "",
                    label: "好人文指数",
                    pieData: [
                        { value: 100 - 88.49, name: "" },
                        { value: 88.49, name: "好人文指数" },
                    ],
                },
                {
                    id: "xuncha",
                    chart: "",
                    label: "治理巡查指数",
                    pieData: [
                        { value: 100 - 87.2, name: "" },
                        { value: 87.2, name: "治理巡查指数" },
                    ],
                },

                {
                    id: "fugong",
                    chart: "",
                    label: "防疫－复工复产指数",
                    pieData: [
                        { value: 100 - 88.4, name: "" },
                        { value: 88.4, name: "防疫－复工复产指数" },
                    ],
                },
            ],
        };
    },
    watch: {
        charsData: {
            handler(val) {
                val.forEach((item,index) => {
                    this.createCharts(item.id, "pie", {
                        pieLabel: item.pieLabel,
                        pieData: item.pieData,
                    });
                    
                });
                
            },
            deep: true,
        },
        barList: {
            handler(val) {
                let data = {
                    barLabel: val.map((item) => item.name),
                    barValue: val.map((item) => item.value),
                };
                this.createCharts("lineCharts", "bar", data);
                for(let i = 0;i<14;i++){
                    if( viewer.entities.getById("xiangjie"+i)){
                        viewer.entities.removeById("xiangjie"+i)
                    }
                    
                }
                for(let i = 0;i<15;i++){
                    if( viewer.entities.getById("xiangzhen"+i)){
                        viewer.entities.removeById("xiangzhen"+i)
                    }
                }
                axios.get('./data/乡镇.geojson').then(res=>{
                    let datas = res.data.features;
                    // val.sort((a,b)=>{return a-b})
                    datas.forEach((element ,index)=> {
                    //this.$cp.addPloygonLine("xiangjie"+index,[].concat.apply([], element.geometry.coordinates[0][0]), Cesium.Color.WHITE)Cesium.Color.fromCssColorString("#204789"),
                    this.$cp.addPloygon("xiangjie"+index,[].concat.apply([], element.geometry.coordinates[0][0]),parseInt((val[index].value*5)),index,"leftClick", this.pLeftClick)
                    });
                    val.forEach((item,index)=>{
                        this.$cp.addOnlyLabel("xiangzhen"+index, item.lonLat, parseInt(item.value)+500 , item.name+ item.value , "leftClick", this.leftClick)
                    })
                })
                
            },
            deep: true,
        },
    },
    mounted() {
        let that = this;
        this.overAll = this.overAll2020;
        this.charsData = this.charsData2020;
        // this.townList = this.townList2020;
        this.barList = this.townList2020;
        this.charsData.forEach((item) => {
            this.createCharts(item.id, "pie", {
                pieLabel: item.pieLabel,
                pieData: item.pieData,
            });
        });
        this.barList = this.townList2020;
        let data = {
            barLabel: this.barList.map((item) => item.name),
            barValue: this.barList.map((item) => item.value),
        };
        this.createCharts("lineCharts", "bar", data);
        this.rankCalc();
        //this.addPloygonLine();
        this.$cp.flyTo(
            118.30229764047947,
            28.613611919406903,
            65926,
            6.08866342213576,
            -0.811855352283466,
            0.00008398345949167663
        );
        // axios.get('./data/乡镇.geojson').then(res=>{
        //     let datas = res.data.features;
        //     this.townList2020.sort((a,b)=>{return a-b})
        //     console.log(datas.length)
        //     datas.forEach((element ,index)=> {
        //       //this.$cp.addPloygonLine("xiangjie"+index,[].concat.apply([], element.geometry.coordinates[0][0]), Cesium.Color.WHITE)Cesium.Color.fromCssColorString("#204789"),
        //       this.$cp.addPloygon("xiangjie"+index,[].concat.apply([], element.geometry.coordinates[0][0]),parseInt((this.townList2020[index].value*5)),index,"leftClick", this.pLeftClick)
        //     });
        //      console.log(this.townList2020.length)
        //     this.townList2020.forEach((item,index)=>{
        //         this.$cp.addOnlyLabel("xiangzhen"+index, item.lonLat, parseInt(item.value)+500 , item.name+ item.value , "leftClick", this.leftClick)
        //     })
        // })
        //this.goodPlace()
    },
    beforeDestroy() {
        this.removePloygonLine();
        if (this.preRenderListener) {
            this.preRenderListener();
            this.preRenderListener = null;
        }
        for(let i = 0;i<14;i++){
            if( viewer.entities.getById("xiangjie"+i)){
                viewer.entities.removeById("xiangjie"+i)
            }
            
        }
        for(let i = 0;i<15;i++){
            if( viewer.entities.getById("xiangzhen"+i)){
                viewer.entities.removeById("xiangzhen"+i)
            }
        }
    },
    methods: {
        pLeftClick(entity){
            if(this.$cp.currentPolygon){
                this.$cp.currentPolygon.polygon.extrudedHeight = this.$cp.currentPolygonHeight
                this.$cp.currentPolygon.polygon.material = this.$cp.currentPolygonColor
                this.$cp.currentPolygon = null;
            }
            this.$cp.currentPolygonHeight = entity.polygon.extrudedHeight;
            this.$cp.currentPolygonColor = entity.polygon.material;
            this.$cp.currentPolygon = entity;
            this.$cp.currentPolygon.polygon.extrudedHeight = 1500
            this.$cp.currentPolygon.polygon.material =  Cesium.Color.fromCssColorString("#00FFFF").withAlpha(1)
        },
        async changeScore(label) {
            const { data } = await axios.get(`./data/goodPlace/${this.yearValue1}.json`)  
            this.barList = data
                .map((item, index) => {
                    return {
                        name: item.name,
                        value: item[label],
                        rank: 4,
                        lonLat: this.townList2020[index].lonLat,
                    };
                })
                .sort((a, b) => {
                    return b.value - a.value;
                });
            this.scoreTitle = label + "得分榜";
        },
        assessYear(e) {
            this.scoreTitle = "综合得分榜";
            switch (e) {
                case "2020":
                    this.overAll = this.overAll2020;
                    this.charsData = this.charsData2020;
                    // this.townList = this.townList2020;
                    this.barList = this.townList2020;
                    break;
                case "2019":
                    this.overAll = this.overAll2019;
                    this.charsData = this.charsData2019;
                    //  this.townList = this.townList2019;
                    this.barList = this.townList2019;
                    break;
                case "2018":
                    this.overAll = this.overAll2018;
                    this.charsData = this.charsData2018;
                    //  this.townList = this.townList2018;
                    this.barList = this.townList2018;
                    break;
            }
        },
        contrast() {
            if (this.yearValue1 <= this.yearValue2) {
                this.$message.warning("基准年应该小于评价年,请重新选择！");
                return;
            }
            this.rankCalc();
        },
        rankCalc() {
            let that = this;
            let rankArr = this.contrastList.map((value) => {
                return value.name;
            });
            this.contrastList = this[`townList${this.yearValue1}`]
                .map((item, index) => {
                    let diff =
                        (item.value * 100 -
                            that[`townList${that.yearValue2}`][index].value *
                                100) /
                        100;
                    return {diff,...item};
                    
                })
                .sort((a, b) => {
                    return b.diff - a.diff;
                });
                console.log(this[`townList${this.yearValue1}`])
            // this.contrastList.forEach((item,index)=>{
            //     console.log(item.name)
            //     item.rank = index - rankArr.indexOf(item.name) ;
            // })
        },
        addPloygonLine() {
            axios.get("./data/乡镇.geojson").then((res) => {
                let datas = res.data.features;
                datas.forEach((element, index) => {
                    //this.$cp.addPloygonLine("xiangjie"+index,[].concat.apply([], element.geometry.coordinates[0][0]), Cesium.Color.WHITE)Cesium.Color.fromCssColorString("#204789"),
                    this.$cp.addPloygon(
                        "xiangjie" + index,
                        [].concat.apply([], element.geometry.coordinates[0][0]),
                        parseInt(this.townList2020[index].value * (index * 5)),
                        index
                    );
                });
            });
            this.barList.forEach((item, index) => {
                this.$cp.addOnlyLabel(
                    "xiangzhen" + index,
                    item.lonLat,
                    parseInt(item.value * (index * 5)),
                    item.name,
                    "leftClick",
                    this.leftClick
                );
            });
        },
        leftClick() {},
        removePloygonLine() {
            for (let i = 0; i < 14; i++) {
                viewer.entities.removeById("xiangjie" + i);
            }
        },
        goodPlace() {
            let that = this;
            this.isGoodPlace = true;
            if (this.isGoodPlace) {
                this.preRenderListener = viewer.scene.preRender.addEventListener(
                    () => {
                        that.townList2020.forEach((item, index) => {
                            const oneDiv = window.document.getElementById(
                                "yuanzhu" + index
                            );
                            let elWidth = oneDiv.offsetWidth;
                            let elHeight = oneDiv.offsetHeight; // + 60
                            const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                            let domPosition = Cesium.Cartesian3.fromDegrees(
                                item.lonLat[0],
                                item.lonLat[1]
                            );
                            const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
                                domPosition,
                                scratch
                            ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
                            if (Cesium.defined(canvasPosition)) {
                                // 根据元素宽高及当前点屏幕坐标进行偏移
                                oneDiv.style.top =
                                    canvasPosition.y - elHeight * 1.5 + "px";
                                oneDiv.style.left =
                                    canvasPosition.x - elWidth / 1.5 + "px";
                            }
                        });
                    }
                );
            } else {
                if (this.preRenderListener) {
                    this.preRenderListener();
                    this.preRenderListener = null;
                }
            }
        },
        creatOptions(type, data) {
            if (type === "pie") {
                return {
                    tooltip: {
                        trigger: "item",
                        //formatter: "{b}: {c} ({d}%)",
                        show: false,
                    },
                    grid: {
                        top: "0px",
                        left: "0px",
                        right: "0px",
                        bottom: "0px",
                    },
                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: ["60%", "70%"],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: "center",
                                    formatter: function (params) {
                                        return params.data.name
                                            ? params.data.value
                                            : "";
                                    },
                                    textStyle: {
                                        fontSize: 15,
                                        color: "#45F4F7",
                                    },
                                },
                                // emphasis: {
                                //   show: false,
                                //   textStyle: {
                                //     fontSize: "30",
                                //     fontWeight: "bold",
                                //     color:"#fff"
                                //   },
                                //   shadowColor: '#fff'
                                // },
                            },

                            labelLine: {
                                normal: {
                                    show: false,
                                },
                            },
                            data: data.pieData,
                        },
                    ],
                    color: ["rgb(62,61,86)", "#0980BE"],
                };
            } else {
                return {
                    // title: {
                    //   text: title,
                    //   left: "center",
                    //   textStyle: {
                    //     color: "#fff",
                    //     fontSize: 16,
                    //   },
                    // },
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        top: "10px",
                        left: "40px",
                        right: "0px",
                        bottom: "50px",
                    },
                    xAxis: {
                        name: "",
                        type: "category",
                        nameTextStyle: {
                            //x轴标题颜色
                            color: "#fff",
                            fontSize: 5,
                        },
                        axisLabel: {
                            //x轴数据颜色
                            formatter: "{value}",
                            textStyle: {
                                color: "#fff",
                            },

                            interval: 0,
                            rotate: 45, //代表逆时针旋转45度
                        },

                        data: data.barLabel,
                    },
                    yAxis: {
                        name: "",
                        nameTextStyle: {
                            //y轴标题颜色
                            color: "#fff",
                            fontSize: 13,
                        },
                        type: "value",
                        axisLabel: {
                            //y轴数据颜色
                            formatter: "{value}",
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    series: [
                        {
                            data: data.barValue,
                            type: "bar",
                            barWidth: 10,
                            itemStyle: {
                                //通常情况下：
                                normal: {
                                    //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                    color: function (params) {
                                        let colorList = [
                                            "#ED1A70",
                                            "#34BECA",
                                            "#F5A623",
                                        ];
                                        if (params.dataIndex < 3) {
                                            return colorList[0];
                                        } else if (
                                            params.dataIndex >
                                            data.barValue.length - 4
                                        ) {
                                            return colorList[2];
                                        } else {
                                            return colorList[1];
                                        }
                                    },
                                },
                            },
                            smooth: true,
                        },
                    ],
                };
            }
        },
        createCharts(id, type, data) {
            let myChart = this.$echarts.init(document.getElementById(id));
            myChart.clear();
            // 绘制图表
            myChart.setOption(this.creatOptions(type, data));
            window.onresize = function () {
                myChart.resize();
            };
        },
    },
};
</script>
<style>
.yuanzhu {
    position: relative;
    height: 100px;
    width: 50px;
    background: rgba(240, 32, 124, 0.3);
    margin: 0 auto;
    margin-top: 10px;
    z-index: 999;
}
.yuanzhu:before {
    position: absolute;
    top: -10px;
    content: "";
    display: block;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: rgba(240, 32, 124, 1);
    z-index: 998;
}
.yuanzhu:after {
    position: absolute;
    bottom: -12px;
    content: "";
    display: block;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: rgba(2240, 32, 124, 1);
    z-index: 997;
}
</style>
<style lang="stylus" >
@import '../../assets/css/varibles.styl'
.goodPlace
    width vw(500)
    height vh(1020)
    position absolute
    left vw(7)
    top vh(60)
    z-index 100
    display flex
    flex-direction column
    justify-content space-between
    background rgba(1, 23, 64, 0.8)
    padding vh(15) vw(30) vh(0) vw(30)
    .evaluate-wrap
        .evaluate-title
            font-size vw(20)
            color #ffffff
            text-align center
            img
                width vw(495)
            .title-num
                margin 0 vh(190)
                height vh(40)
                width vw(150)
                font-size vw(25)
                color #45F4F7
                border-bottom 2px solid #45F4F7
        .evaluate-choice
            .choice-conditions
                background url('/images/GoodPlace/choice-bg.png') no-repeat
                // background-size cover
                display flex
                background-size 100% 100%
                padding vh(20) vw(10) vh(10) vw(20)
                justify-content space-between
                margin-top vh(15)
                height vh(45)
                .choice-row
                    font-size vw(13)
                .choice-btn-wrap
                    button
                        padding vh(8) vw(7)
                        background-color #34BECA
                        border none
                        color #091F46
                    .btn-pad
                        margin 0 vw(10)
                        cursor:pointer
                        
            .choice-charts
                display flex
                flex-direction row
                flex-wrap wrap
                text-align center
                .charts-wrap
                    width vw(125)
                    // height: vh(130);
                    .charts-data
                        width vw(125)
                        height vh(125)
                    span
                        font-size vw(14)
                        cursor:pointer
    .score-wrap
        padding vh(15) 0
        height vh(195)
        margin 0
        position relative
        img
            width vw(496)
        span
            display inline-block
            color #45F4F7
            font-size vw(16)
            position absolute
            top vh(40)
            left 0
        .line-charts-data
            margin-top vh(25)
            height vh(170)
            width vw(430)
    .list-wrap
        height vh(400)
        padding vh(20) 0
        position relative
        img
            width vw(495)
        .title
            display inline-block
            color #45F4F7
            font-size vw(16)
            position absolute
            top vh(45)
            left 0
        .list-content
            display flex
            justify-content space-between
            margin-top vh(30)
            span
                display inline-block
                font-size vw(14)
                width vw(40)
                height vh(25)
                margin 0 vw(3)
            .index
                font-size vw(13)
                display inline-block
                width vw(22)
                height vh(22)
                text-align center
                line-height vh(22)
                box-sizing border-box
                border 1px solid #45F4F7
                border-radius 50%
                margin 0 vw(10)
            .up-show
                color #ED1A70
            .list-name
                width vw(70)
            .down-show
                color #34BECA
            li
                margin vh(15) 0
                img
                    width vw(11)
                    height vh(12)
.el-select
    width vw(90)
    height vh(30)
.el-select .el-input__inner
    padding-right 30px
    background-color unset
    border 1px solid #5C739E
    color #fff
    height vh(35)
.el-select .el-input.is-disabled .el-input__inner
    background-color unset
.el-radio__label
    color #fff
.el-input__suffix
    top vh(2)
.el-select-dropdown
    background-color rgb(12, 29, 61)
.el-select-dropdown__item
    color #fff
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover
    background-color #3c3e40
</style>